

class VNode {
    constructor (tagName, props, children) {
        this.tagName = tagName
        this.props = props
        this.children = children
    }
    render () {
        // 根据 tagName 构建 DOM 节点
        const el = document.createElement(this.tagName)
        // 设置 DOM 节点属性
        Object.entries(this.props).forEach(([key, value]) => el.setAttribute(key, value))
        var children = this.children || []
        /* 渲染子节点 */
        children.forEach((child) => {
            var childNode = (child instanceof VNode)
                ? child.render() // 如果子节点也是虚拟DOM，递归构建DOM节点
                : document.createTextNode(child) // 如果字符串，只构建文本节点
            el.appendChild(childNode)
        })
        return el
    }
}
const h = (tagName, props, children) => {
    return new VNode(tagName, props, children)
}
const ul = h('ul', {id: 'list', style: 'color: red'}, [
    h('li', {class: 'item'}, ['Item 1']),
    h('li', {class: 'item'}, ['Item 2']),
    h('li', {class: 'item'}, ['Item 3'])
])
const urlDom = ul.render() // 渲染 DOM 节点和它的子节点
ulDom.getAttribute('id') === 'list' // true
ulDom.querySelectorAll('li').length === 3 // true